import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:mobile_vpn/common/cpn/cpn_view_state.dart';
import 'package:mobile_vpn/pages/login_page/password_login_page/password_login_logic.dart';

import '../../../common/cpn/app_bar.dart';
import '../../../router/routers.dart';

class PasswordLoginPage extends CpnViewState<PasswordLoginLogic> {
  const PasswordLoginPage({Key? key}) : super(key: key, bindViewState: false);

  @override
  AppBar? buildAppBar() => commonAppBar(bottom: commonTitleBar());

  @override
  Widget buildBody(BuildContext context) {
    // TODO: implement buildBody
    return SingleChildScrollView(
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 32.w),
        child: Form(
          key: logic.formKey,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(height: 40.h),
              Text(
                '欢迎登录',
                style: TextStyle(
                  fontSize: 28,
                  fontWeight: FontWeight.bold,
                  color: Colors.black,
                ),
              ),
              SizedBox(height: 8.h),
              Text(
                '请输入您的账号和密码',
                style: TextStyle(
                  fontSize: 16,
                  color: Colors.grey,
                ),
              ),
              SizedBox(height: 40.h),
              _buildEmailInput(),
              SizedBox(height: 24.h),
              _buildPasswordInput(),
              SizedBox(height: 40.h),
              _buildLoginButton(),
              SizedBox(height: 20.h),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  TextButton(
                    onPressed: () {
                      // 注册逻辑
                      AppRoutes.jumpPage(AppRoutes.registerPage);
                    },
                    child: Text(
                      '注册',
                      style: TextStyle(color: Colors.blue, fontSize: 16),
                    ),
                  ),
                  Text(' | ', style: TextStyle(fontSize: 16)),
                  TextButton(
                    onPressed: () {
                      AppRoutes.jumpPage(AppRoutes.loginPage);

                    },
                    child: Text(
                      '手机号登陆',
                      style: TextStyle(color: Colors.blue, fontSize: 16),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildEmailInput() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '手机号',
          style: TextStyle(
            fontSize: 14,
            color: Colors.black54,
          ),
        ),
        SizedBox(height: 8.h),
        TextFormField(
          controller: logic.emailController,
          keyboardType: TextInputType.phone,
          onChanged: (value) {
            if (value.length > 11) {
              logic.emailController.text = value.substring(0, 11);
              logic.emailController.selection = TextSelection.fromPosition(
                TextPosition(offset: logic.emailController.text.length),
              );
            }
            logic.validatePhone(logic.emailController.text);
          },
          validator: (value) {
            String val = logic.validatePhone(value);
            if (val.isEmpty) {
              return null;
            }
          },
          decoration: InputDecoration(
            hintText: '请输入手机号',
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(12.r),
              borderSide: BorderSide.none,
            ),
            filled: true,
            fillColor: Colors.grey[100],
            errorStyle: TextStyle(fontSize: 12, color: Colors.red),
            errorText: logic.phoneErrorText.value.isNotEmpty ? logic.phoneErrorText.value : null,
          ),
        )
      ],
    );
  }

  Widget _buildPasswordInput() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '密码',
          style: TextStyle(
            fontSize: 14,
            color: Colors.black54,
          ),
        ),
        SizedBox(height: 8.h),
        TextFormField(
          controller: logic.passwordController,
          obscureText: !logic.isPasswordVisible.value,
          obscuringCharacter: '*',
          decoration: InputDecoration(
            hintText: '请输入密码',
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(12.r),
              borderSide: BorderSide.none,
            ),
            filled: true,
            fillColor: Colors.grey[100],
            suffixIcon: GestureDetector(
              onTap: () {
                logic.isPasswordVisible.toggle();
              },
              child: Icon(
                logic.isPasswordVisible.value ? Icons.visibility : Icons.visibility_off,
                color: Colors.grey,
              ),
            ),
            errorStyle: TextStyle(fontSize: 12, color: Colors.red),
          ),
          validator: (value) {
            String val = logic.validatePassword(value);
            if (val.isEmpty) {
              return null;
            }
          },
        )
      ],
    );
  }

  Widget _buildLoginButton() {
    return SizedBox(
      width: double.infinity,
      height: 38.h,
      child: ElevatedButton(
        onPressed: () {
          print(logic.formKey.currentState!.validate());
          if (logic.formKey.currentState!.validate()) {
            // 登录逻辑
            print("验证成功");
            logic.loginByCode();
          }
        },
        style: ElevatedButton.styleFrom(
          backgroundColor: Colors.blue,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(12.r),
          ),
          elevation: 0,
        ),
        child: Text(
          '登录',
          style: TextStyle(
            fontSize: 16,
            color: Colors.white,
          ),
        ),
      ),
    );
  }
}
